import React from 'react';
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import configureStore from '../store/configureStore';
import { Router, Route, IndexRoute, hashHistory } from 'react-router';
import App from '../containers/index';
import Home from '../components/Home';
import Stuff from '../components/Stuff';
import Contact from '../components/Contact';
import { syncHistoryWithStore } from 'react-router-redux'

const store = configureStore();
const createSelectLocationState = () => {
    let prevRoutingState, prevRoutingStateJS;
    return (state) => {
        const routingState = state.get('routing'); // or state.routing
        if ((!routingState || !routingState.get('locationBeforeTransitions') ||
            routingState.get('locationBeforeTransitions').get('action') === 'PUSH') &&
            (typeof prevRoutingState === 'undefined' || prevRoutingState !== routingState)) {
            prevRoutingState = routingState;
            prevRoutingStateJS = routingState.toJS();
        }
        return prevRoutingStateJS;
    };
};

const history = syncHistoryWithStore(hashHistory, store, {
    selectLocationState: createSelectLocationState()
});
render(
    <Provider store={store}>
        <Router history={history}>
            <Route path="/" component={App}>
                <IndexRoute component={Home} />
                <Route path="/stuff" component={Stuff} />
                <Route path="/contact" component={Contact} />
            </Route>
        </Router>
    </Provider>,
    document.getElementById('root')
);